<template>
  <div id="app">
    <!-- loading组件 -->
    <Loading v-show="LOADING"></Loading>
    <!-- 路由视图 -->
    <keep-alive>
      <router-view v-if="$route.meta.keep" />
    </keep-alive>
    <router-view v-if="!$route.meta.keep" />
    <!-- 底部导航栏 -->
    <navigation-bar v-show="NavigationBarFlag"></navigation-bar>
  </div>
</template> 

<script>
import Loading from "./components/Loading.vue";
import NavigationBar from "./components/NavigationBar.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      NavigationBarShowList: [
        "CommunityView",
        "SpaceView",
        "FoundView",
        "HomeView",
      ],
      NavigationBarFlag: true,
    };
  },
  methods: {
    NavigationBarFlagChange() {
      let name = this.$route.name;
      this.NavigationBarFlag = this.NavigationBarShowList.some(
        (_name) => _name == name
      );
    },
  },
  computed: {
    ...mapState(["LOADING"]),
  },
  updated() {
    this.NavigationBarFlagChange();
  },
  components: {
    NavigationBar,
    Loading,
  },
};
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>
